<template>
  <view class="container">
	<view class="header-pannel">
		<view class="null-pannel"></view>
		<view class="example">
		  <uni-forms ref="form" :model="queryParams" labelWidth="80px">
		    <uni-forms-item label="订单编号" name="orderCode" class="item-margin">
		      <uni-easyinput v-model="queryParams.orderCode" placeholder="请输入订单编号"  @blur="inpBlurOrder" ref="Focus" value=""/>
		    </uni-forms-item>
			<uni-forms-item label="规格" name="type" class="item-margin">
				<uni-data-select
					v-model="queryParams.type"
					:localdata="typeList"
					placeholder="请选择规格"
				></uni-data-select>
			</uni-forms-item>
		    <uni-forms-item label="箱码" name="cartonCode" class="margin0">
		      <uni-easyinput v-model="queryParams.cartonCode" placeholder="请输入箱码" ref="nextFocus" @confirm="handlebind" />
			</uni-forms-item>
		  </uni-forms>
		</view>
	</view>
	
	<view class="table1">
		<uni-table ref="table" border stripe emptyText="暂无更多数据" @selection-change="selectionChange" class="tableAll">
			<uni-tr>
				<uni-th align="center">规格</uni-th>
				<uni-th align="center">物料</uni-th>
				<uni-th align="center">箱码</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="(item,index) in boxCodeList" :key="index">
				<uni-td align="center">{{ item.type }}</uni-td>
				<uni-td align="center">{{ item.materialCode }}</uni-td>
				<uni-td align="center">{{ item.tempCartonCodeList.join() }}</uni-td>
			</uni-tr>
		</uni-table>
	</view>
	<view class="footer-btn">
		<button type="primary" @click="submit">提交</button>
	</view>
	
	
	<!-- 弹框 -->
	<view>
				<!-- 输入框示例 -->
		<uni-popup ref="alertDialog" type="dialog" :custom="true">
			<view class="popcontent">
				<uni-group  v-for="(item,index) in boxCodeList" v-if="item.cartonCodeList.length > 1" :key="index">
						<view>
						<uni-row>
							<uni-col :span="6">
								<view>
									规格
								</view>
							</uni-col>
							<uni-col :span="18">
								<view class="demo-uni-col light">
									{{item.type}}
								</view>
							</uni-col>
						</uni-row>
						</view>
						<view>
							<uni-row>
								<uni-col :span="6">
									<view>
										织板编码
									</view>
								</uni-col>
								<uni-col :span="18">
									<view class="demo-uni-col light">
										{{item.materialCode}}
									</view>
								</uni-col>
							</uni-row>
							</view>
							
						
						<view v-for="(cartonItem, index) in item.cartonCodeList" :key="cartonItem.cartonId">
							<uni-row>
								<uni-col :span="6">
									<view class="demo-uni-col light">
										数量
									</view>
								</uni-col>
								<uni-col :span="18">
									<view style="margin-bottom: 5rpx;">{{cartonItem.cartonId}}</view>
									<uni-easyinput v-model="cartonItem.materialNum" placeholder="请输入数量" />
								</uni-col>
							</uni-row>
						</view>
				</uni-group>
				
				<view>
					<button class="mini-btn" type="primary" size="mini" @click="allSave">确定</button>
					<button class="mini-btn float-right" type="default" size="mini" @click="dialogClose">取消</button>
				</view>
				
			</view>
		</uni-popup>
	</view>
	
	<!-- 提示框 -->
	<view>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
	
  </view>
  
</template>

<script>
	import { getbindBoxCode, bindBoxCodeEdit, bindBoxCodeSave,bindBoxCodeNumQuery,bindBoxCodeNumUpdate } from "@/api/longyi/bindBoxCode/Index.js"
  import {queryDispatchList, validateCartonCode, submitProductCollect} from "@/api/longyi/productCollect/Index.js"
	
	export default {
	  data() {
	    return {
			type: 'center',
			msgType: 'success',
			messageText: '这是一条成功提示',
			value: '',
			inpFocusOrder: true,
			inpFocusCarton: false,
			multipleFlag: true,
		  popParams: {
		    cartonCode: "",
		    num: ""
		  },
		  cartonCode: "",
		  numArry: [],
	      queryParams: {
	        pageSize: 10,
	        pageNo: 1,
	        orderCode: "",
	        cartonCode: ""
	      },
		  listData: [],
		  listData2: [],
		  bindData: {
		      orderCode: '',
		      type: '',
		      code: '',
		      specification: '',
		      cartonCode: ''
		    },
			loading: false,
			typeList: [],
			boxCodeList: [],
	      rules: {
	        orderCode: {
	          rules: [{
	            required: true,
	            errorMessage: '订单编号不能为空'
	          }]
	        }
	      },
		  rules2: {
		    cartonCode: {
		      rules: [{
		        required: true,
		        errorMessage: '箱码不能为空'
		      }]
		    }
		  }
	    }
	  },
	  
	  onReady() {
	    this.$refs.form.setRules(this.rules)
	  },
	  methods: {
		  inpBlurOrder(inpDom){
			  this.inpFocusOrder = false
			  this.typeList = []
			  let query = {
				  pageNo: 1,
				  pageSize: 100,
				  ticketNumber: this.queryParams.orderCode
			  }	
			  queryDispatchList(query).then(res => {
				  let list = res.data;
				  let arr = []
				  list.forEach(function(item){
					  let modelKp = item.modelKp;
					  let type = modelKp;
					  let index = arr.findIndex(obj => obj.value === modelKp);
					  if(index == -1){
						  arr.push({"text" : type, "value" : modelKp});
					  }
				  });
				  this.typeList = arr;
			  });
			},
		  
			//比对箱码和织板编码
			handlebind () {
			    const cartonCodesPra = this.queryParams.cartonCode;
			    if(!cartonCodesPra.includes('_')){
			        this.$modal.msgError("请输入正确的箱码！")
					this.queryParams.cartonCode = null;
			        return
			    }
			
			    // 确保 boxCodeList 是响应式数组
			    this.boxCodeList = this.boxCodeList || [];
			
			    // 使用箭头函数保持 this 上下文
			    validateCartonCode(cartonCodesPra).then((res) => {  // 改为箭头函数
			        
			        if(res.data){
			            const materialCode = res.data.materialCode;
			            const type = this.queryParams.type;
			            const cartonId = res.data.id;
			            
			            // 查找是否已存在相同物料
			            const existingItem = this.boxCodeList.find(item => 
			                item.materialCode === materialCode && item.type === type
			            );
			            
			            if(existingItem) {
			                existingItem.cartonCodeList.push({"cartonId":cartonId, "materialNum" : null});
							existingItem.tempCartonCodeList.push(cartonId);
			            } else {
			                this.boxCodeList.push({
								orderCode: this.queryParams.orderCode,
			                    type: type,
			                    materialCode: materialCode,
			                    cartonCodeList: [{"cartonId":cartonId, "materialNum" : null}],
								tempCartonCodeList: [cartonId]
			                });
			            }
			        } else {
			            this.$modal.msgError("箱码不存在.");
			        }
					this.queryParams.cartonCode = null;
			    }).catch(error => {
			        this.$modal.msgError("箱码验证失败");
			    });
			},
			
			submit(){
				let len = this.boxCodeList.length;
				let dialogFlag = false;
				for(let i = 0; i < len; i++){
					let boxCodeObj = this.boxCodeList[i];
					let cartonCodeSize = boxCodeObj.cartonCodeList.length;
					if(cartonCodeSize > 1){
						dialogFlag = true;
						break;
					}
				}
				
			  if(!dialogFlag){
				  this.allSave()
			  }else{
				  this.$refs.alertDialog.open()
			  }
			},
			dialogClose(){
				this.$refs.alertDialog.close()
			},
			allSave(){
				submitProductCollect(this.boxCodeList).then(res => {
					if(res.data == true){
						this.boxCodeList = []
						this.$refs.alertDialog.close()
						this.$modal.messageText("提交成功");
					}
					this.$refs.alertDialog.close()
					
				});
			}
	  }
	}
</script>

<style lang="scss">
  .example {
    padding: 15px;
    background-color: #fff;
	// margin: 10px auto;
	.item-margin.is-direction-left {
	    margin-bottom: 15px !important;
	}
	
  }
  .margin0 {
      margin-bottom: 0 !important;
  }
  .header-pannel{
	  position: fixed;
	  width: 100%;
	  top: 44px;
	  z-index: 999;
  }
  .null-pannel{
	  height: 10px;
	  background: #f1f1f1;
  }
  .footer-btn{
  	  padding: 15px;
  	  background-color: #fff;
  	  // margin-top: 66px;
  	  position: fixed;
  	  width: 100%;
  	  bottom: 0;
  }
  .container {
      /**
	  overflow: hidden;
	  */
  }
  .popcontent{
	  padding: 15px;
	  border-radius: 11px;
	  background-color: #fff;
	  width: 95vw;
	  overflow-x: scroll;
	  // height: 500px;
	      // overflow-y: scroll;
  }
  .float-right{
	  float: right;
  }
  .border1{
	  border: 0.5px solid #eee;
	  margin: 15px 0;
  }
  .padding-bottom{
  	  padding: 15px;
  }
  .padding-top{
  	  padding: 10px;
  }
  .tableAll{
	  word-break: break-all;
  }
  .table1{
	  margin-bottom: 90px;
	  margin-top: 140px;
  }
</style>